<template>
    <div class="chat">
        <!-- 头部组件 -->
        <comp-det-heater>
            <template v-slot:left>
                <div class="left" @click="cancel"><van-icon name="arrow-left" /></div>
            </template>
            <template v-slot:center>
                <span>{{ currentChat }}</span>
            </template>
        </comp-det-heater>
        <!-- 内容 -->
        <div class="chat-box">
            <div class="messgae" v-for="(el,index) in userInfo.contentList" :key="index" :class="el.role">
                <div class="other" v-if="el.role=='other'">
                    <img :src="userInfo.imgUrl">
                    <span>{{ el.content }}</span>
                </div>
                <div class="me" v-if="el.role=='mine'">
                    <span>{{ el.content }}</span>
                    <img :src="mine.url">
                </div>
            </div>
            
        </div>
        <!-- 底部发送框 -->
        <footer>
            <input v-model="content" type="text">
            <button @click="send">发送</button>
        </footer>
    </div>
</template>


<script>
import { mapState } from 'vuex';
import CompDetHeater from "../components/comp-detHeater.vue";
import WebIM from 'easemob-websdk';
const appKey = "1101230218170423#zhiyebang";
export default{
    data(){
        return{
            content:'',
            userInfo:'',
        }
    },
    components: {
        CompDetHeater,
    },
    computed:{
        ...mapState(['currentChat','mine','chatList'])
    },
    methods:{
        cancel(){
            this.$router.go(-1)
        },
        send(){
            if(this.content.trim()){
                console.log(this.content);
                let option = {
                    chatType: 'singleChat',    // 会话类型，设置为单聊。
                    type: 'txt',               // 消息类型。
                    to: '15875192517',          // 消息接收方（用户 ID)。
                    msg: this.content           // 消息内容。
                }
                let msg = WebIM.message.create(option);
                WebIM.conn.send(msg).then(res=>{
                    console.log(res);
                })

                this.userInfo.contentList = [...this.userInfo.contentList,{
                    role:'mine',
                    content:this.content
                }]
                this.content = '';

            }
            
        }
    },
    mounted(){
        // 初始化客户端
        WebIM.conn = new WebIM.connection({
            appKey:appKey,
        })
        // 登录
        WebIM.conn
            .open({ user: this.mine.num, pwd: '1234' })
            .then((res) => {
                console.log(res);
            })
            .catch((e) => {
                console.log(e);
            });
        // 接收信息
        WebIM.conn.listen({
            onTextMessage:(msg)=>{
                console.log(msg);
                this.userInfo.contentList = [...this.userInfo.contentList,{
                    role:'other',
                    content:msg.data
                }]
            }
        })
        

        this.chatList.forEach(element => {
            if(element.userName == this.currentChat){
                this.userInfo = element
            }
        });
    }
}
</script>

<style lang="scss" scoped>
.chat{
    height: 100%;
    footer{
        height: 30px;
        background-color: #eef;
        position: fixed;
        bottom: 0;
        width: 100%;
        display: flex;
        padding: 15px;
        input{
            border-radius: 999px;
            outline: none;
            border: none;
            font-size: 16px;
            padding: 0 15px;
            width: 70%;
        }
        button{
            font-size: 12px;
            outline: none;
            border: none;
            margin-left: 15px;
            background-color: #fccde7;
            color: #fff;
            border-radius: 999px;
            padding: 5px 10px;
        }
    }
    .chat-box{
        padding-top: 80px;

        .messgae{
            width: 100%;
            display: flex;
            margin-bottom: 20px;
            img{
                width: 30px;
                height: 30px;
                margin: 0 15px;
                border-radius: 50%;
            }
            span{
                background-color: #fff;
                color: #333;
                font-size: 18px;
                background-color: #eee;
                padding: 10px 15px;
            }
            &.other{
                justify-content: start;
            }
            &.mine{
                justify-content: end;
            }
        }
    
    }
}
</style>